{{extend './head.html'}}
{{block 'content'}}
<div class="index">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" style="height: 500px;">
            {{each swiper}}
            {{if $index==0}}
            <div class="carousel-item active">
                <img class="d-block w-100" src="{{$value.swiperurl}}">
            </div>
            {{else}}
            <div class="carousel-item">
                <img class="d-block w-100" src="{{$value.swiperurl}}">
            </div>
            {{/if}}
            {{/each}}
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <div class="layui-input-block" style=" display: flex;margin: 0px;margin-top: 10px;">
        <input type="text" name="title" id="sstext" placeholder=" 请输入搜索内容" class="layui-input">
        <button class="layui-btn" id="ssbtmn">立即提交</button>
    </div>
    <div class="shop-content" id="content">
        <div class="shopp" id="shopp">

        </div>
    </div>


</div>
{{/block}}
{{block 'contentcss'}}
<style>
    .index {
        margin: 0px auto;
        width: 980px;
    }


    .shopp {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;

    }

    .shopp div:last-child {
        width: 100%;
    }

    .shopp .card {
        margin: 9px 14px;
    }

    .shopp-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .shopp {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .shop-content {
        min-height: 1000px;
    }
</style>
{{/block}}
{{block 'contentjs'}}
<script>
    init();
    function init() {
        function getCookie(name) {
            var arr = document.cookie.split("; ");
            for (var i = 0, len = arr.length; i < len; i++) {
                var item = arr[i].split("=");
                if (item[0] == name) {
                    return item[1];
                }
            }
            return "";
        }
        $(function () {
            $('.carousel').carousel({
                interval: 5000
            })
        })
        //购物车工具包
        //1-----获取数据信息
        function getshopping(name) {
            return JSON.parse(localStorage.getItem(name));
        }

        layui.use(['layer', 'flow'], function () {
            var $ = jQuery;
            var layer = layui.layer;
            var flow = layui.flow;
            getAjaxData()
            function getAjaxData() {
                flow.load({
                    elem: '#shopp', //流加载容器, 
                    done: function (page, next) {
                        var name = $('#sstext').val();
                        $.ajax({
                            type: "get",
                            url: `/api/commodityPage?page=${page}&limit=6&name=${name}`,
                            success: function (datas) {
                                if (datas.flog) {
                                    let goods = datas.data
                                    let htmlList = []
                                    htmlList = goods.map(function (cur) {
                                        let pre = `
                                        <div class="card" style="width:298px;">
                                            <a href="info?id=${cur.id}">
                                                <img class="card-img-top" src="${cur.url}" alt="Card image cap" style="height:262px;">
                                            </a>

                                            <div class="card-body">
                                                <div class="shopp-head">
                                                    <h5 class="card-title" style="font-weight: bold;">${cur.name}</h5>
                                                    <p style="color:#aaa">价格:<span
                                                            style="color: red;font-size: 16px; font-weight: bold;">${cur.porice}</span>￥
                                                    </p>
                                                </div>
                                                <p class="card-text" style="font-size: 10px;">${cur.info}</p>
                                                <div class="btn" style="text-align: center;width: 100%;">
                                                    <button type="button" class="btn btn-primary btn-lg myModals" data-toggle="modal"
                                                        data-method="setTop" sid="${cur.id}" style="width:150px;outline: none;">购买</button>
                                                </div>
                                            </div>
                                        </div>
                                 `  ;
                                        return pre
                                    })
                                    next(htmlList.join(''), page < datas.pageNum);
                                }
                            }
                        });
                    }
                });
            }


            //触发事件
            var active = {
                setTop: function (othis) {
                    //判断是否登录
                    if (getCookie('user_key') == null) {
                        layer.msg('请先登录', { icon: 5 });
                        return;
                    }
                    var val;
                    var that = this;
                    var sid = $(that).attr('sid');
                    $.ajax({
                        type: "get",
                        url: "/api/shoppinfo?id=" + sid,
                        success: function (datas) {
                            if (datas.flog) {
                                val = datas.data[0];
                                var type = othis.data('type'), text = othis.text();
                                layer.open({
                                    type: 1
                                    , offset: type
                                    , id: 'layerDemo' + type
                                    , content: '<div style="padding: 20px 100px;">是否购买确认购买该手办？</div>'
                                    , btn: ['取消', '确定']
                                    , btnAlign: 'c'
                                    , shade: 0
                                    , yes: function () {
                                        layer.closeAll();
                                    },
                                    btn2: function () {
                                        //判断库存
                                        let numCount = 1
                                        if (getshopping(val.name) == null) {
                                            numCount = numCount
                                        } else {
                                            numCount = Number(getshopping(val.name).number) + numCount
                                        }
                                        if (numCount > Number(val.stock)) {
                                            layer.msg('商品库存不足!', { icon: 5, time: 1000 });
                                            return
                                        }
                                        if (getshopping(val.name) == null) {
                                            localStorage.setItem(val.name, JSON.stringify({
                                                id: val.id,
                                                name: val.name,
                                                number: numCount
                                            }));
                                        } else {
                                            localStorage.setItem(val.name, JSON.stringify({
                                                id: val.id,
                                                name: val.name,
                                                number: numCount,
                                            }));
                                        }
                                        layer.msg('加入购物车成功', { icon: 6 });
                                    }
                                });
                            } else {
                                layer.msg('程序异常!', { icon: 5, time: 1000 });
                            }
                        },
                        error: function (err) {
                            layer.msg('程序异常!', { icon: 5, time: 1000 });
                        }
                    });

                }

            }

            $("#shopp").on('click', '.myModals', function () {
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });

            $("#shopp").on('click', '#layerDemos', function () {
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });

            $("#ssbtmn").on("click", function () {
                $("#shopp").remove();
                $(document).unbind();
                $('#content').append('<div class="shopp" id="shopp"></div>');
                getAjaxData();	//执行流加载函数
            })

        });
    }
</script>
{{/block}}